<template>
	<view class="works">
		<view style="width: 100%; background: #fff; position: fixed;z-index: 5;">
			<u-tabs :list="list" lineWidth="30" lineColor="#ff6005" :activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#999',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="changeTab">
			</u-tabs>
		</view>
		<view class="work-top">
			<ai-pat v-show="tabActive == 0" :imageList="imageList"></ai-pat>
			<ai-dub v-show="tabActive == 1" :dubList="imageList"></ai-dub>
			<view v-show="tabActive==2" class="nodata">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>
			<view style="margin-top: 60rpx;">
				<u-loadmore v-if="imageList.length >= 10" :status="status" line />
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import aiPat from '@/pages/works/ai-pat/ai-pat.vue'
	import aiDub from '@/pages/works/ai-dub/ai-dub.vue'
	import {
		getRecordList
	} from '@/api/paint.js'
	import { dubList } from '@/api/index.js'
	export default {
		components: {
			aiPat,
			aiDub
		},
		data() {
			return {
				list: [
					{ name: 'AI绘画' },
					{ name: 'AI配音' },
				  // { name: '声音克隆' },
			  ],
				imageList: [], // 绘画列表
				dubLists: [
					// { title: '恢复肌肤火箭股份夫人个体人格割让给', time: '2024-08-30 16:00'},
					// { title: '恢复肌肤火箭股份', time: '2024-08-30 16:00'},
					// { title: '恢复肌肤火箭股份', time: '2024-08-30 16:00'}
				], // 配音列表
				tabActive: 0,
				page: 1,
				limit: 10,
				status: 'loadmore' // loading / nomore
			}
		},
		onShow() {
			this.imageList = []
			this.page = 1
			if (uni.getStorageSync('apiticket')) {
				if(this.tabActive == 0) {
					this.getList()
				} else if(this.tabActive == 1) {
					this.getDubList()
				}
				// this.getList()
				// this.getDubList()
			}
		},
		onPullDownRefresh() {
			this.imageList = []
			this.page = 1
			if(uni.getStorageSync('apiticket')) {
				if(this.tabActive == 0) {
					this.getList()
				} else if(this.tabActive == 1) {
					this.getDubList()
				}
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onReachBottom() {
			this.status = 'loading'
			console.log('日月日月', this.tabActive)
			// this.limit += 10
			this.page += 1
			if(this.tabActive == 0) {
				this.getList()
			} else if(this.tabActive == 1) {
				this.getDubList()
			}
			
		},
		onLoad() {},
		methods: {
			getDubList() {
				let param = {
					page: this.page,
					pagesize: this.limit,
				}
				dubList(param).then(list => {
					console.log('list', list)
					const { data } = list
					this.imageList = this.imageList.concat(data)
					if(this.imageList.length > 0 && data.length <= 0) {
						this.status = 'nomore'
					}
				})
			},
			getList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				getRecordList(data).then(res => {
					console.log('tupres', res)
					const list = res.data.data
					list.forEach(ele => {
						// if(ele.url.includes(',')) {
							ele.url = ele.url.split(',')
							// console.log('elel', ele.url)
						// }
					})
					// console.log('list', list)
					this.imageList = this.imageList.concat(list)
					if(this.imageList.length > 0 && list.length <= 0) {
						this.status = 'nomore'
					}
				})
			},

			changeTab(item) {
				console.log('ingfd', item)
				this.imageList = []
				this.page = 1
				this.tabActive = item.index
				if (uni.getStorageSync('apiticket')) {
					if(this.tabActive == 0) {
						this.getList()
					} else if (this.tabActive == 1) {
						this.getDubList()
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.works {
		position: relative;
	}
	.work-top {
		padding: 100rpx 0;
	}

	.nodata {
		
		width: 100%;
		margin-top: 100rpx;
	}
</style>